'''
1、定义：cascading style sheet，层叠样式表，用来美化页面的一种语言
2、作用：美化界面（设置标签文字大小、颜色、字体加粗等样式）
       控制页面布局（设置浮动、定位等样式）
3、引用方式：
     ① 行内式：直接在标签的style属性中添加CSS样式
           <div style="width:100px;height:100px;background:red">hello</div>
              方便、值观
              缺乏复用性
     ② 内嵌式：在<head>标签内添加<style>标签，在<style>内编写CSS代码
           <head>
              <style type="text/css">
                 h3{
                     color:red;
                 }
              </style>
           </head>
               在同一页面内便于复用和维护
               在多个页面之间复用性不高
     ③ 外链式：将CSS代码写在一个单独的.CSS文件中，在<head>标签中使用<link>标签直接引入该文件到页面中
           <link rel="stylesheet" type="text/css" href="CSS/main.css">
               CSS样式和html页面分离，便于维护和复用
               CSS代码过于集中，维护不当易混乱
4、操作：
     <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>                                           # 内嵌式
            h2{
                color:blue
            }
        </style>
        <link rel="stylesheet" href="./css/main.css">    # 外链式
     </head>
     <body>
        <h1 style="color:red">冲啊。</h1>                 # 行内式
        <h1>你好</h1>
        <h2>加油！！！</h2>
        <h3>谁说一定要这么累</h3>
     </body>
5、css选择器：用来选择标签的，选出来以后给标签加样式
     ① 标签选择器
     ② 类选择器
     ③ 层级选择器（后代选择器）
     ④ id选择器（id名称不能重复）
     ⑤ 组选择器
     ⑥ 伪类选择器
         <head>
            <style>
                .box1, .box2{                             # 组选择器
                    width:100px;
                    height:100px;}
                h1{color:red}                             # 标签选择器
                .myh1{color:aqua}                         # 类选择器
                div div{color:red}
                div .mydiv{color:blueviolet}              # 层级选择器
                div p{color:brown}
                #myid{color:red}                          # id选择器
                .box1{background-color: red;}
                .box2{background-color: blue;}
                .box3{                                    # 伪类选择器
                    width:100px;
                    height: 100px;
                    background-color: red;}
                .box3:hover{
                    width: 200px;
                    height: 200px;
                    background-color: blue;}
            </style>
         </head>
         <body>
            <h1>english</h1>
            <h1 class="myh1">american</h1>
            <div>
                <div>jiay</div>
                <div class="mydiv">yyy</div>
                <div>
                    <p>船只</p>
                </div>
            </div>
            <div>hoooo</div>
            <div id=myid>itcast</div>
            <div class="box1"></div>
            <div class="box2"></div>
            <div class="box3"></div>
         </body>
6、css属性
   ① 布局样式属性：
         width:100px;
         height:100px;
         background:red;
         background:url(./tree.jpg)
         border:1px solid black;
            border-top:10px solid red;
            border_left:10px solid blue;
            border-right:10px solid green;
            border-bottom:10px solid pink;
   ② 文本样式属性：
         文字颜色      color: red;
         文字大小      font-size: 12px;
         文字的字体     font-family: 'Microsoft Yahei'
         文字是否加粗   font-weight: normal（bold加粗，normal不加粗）
         文字行高      line-height: 24px
         文字下划线     text-decoration: none
         文字对齐方式   text-align: center（居中）
         文字首行缩进   text-indent: 24px（缩进24px）
'''